<template>
	<div>
		<el-container style="height: 100vh;">
			<el-header>
				<el-menu :default-active="$store.state.activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
					@select="handleSelect">
					<el-menu-item index="0">上课点名</el-menu-item>
					<div style="margin-left: 53px;display: flex;align-items: center;">机构：
						<el-select v-model="organizationId" placeholder="选择机构" v-if="organizationList.length > 0"
							style="width: 200px;margin-right: 7px;" filterable>
							<el-option v-for="item in organizationList" :key="item.id" :label="item.title" :value="item.id" />
						</el-select>
						班级：
						<el-select v-model="classNameId" placeholder="选择班级" v-if="classNameList.length > 0" style="width: 200px;"
							filterable>
							<el-option v-for="item in classNameList" :key="item.id" :label="item.classname" :value="item.id" />
						</el-select>
					</div>
					<div class="flex-grow" />
					<!-- <el-menu-item index="1">首页</el-menu-item> -->
					<el-dropdown size="large">
						<el-menu-item index="5">客服</el-menu-item>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>
									<el-image style="width: 150px; height: 150px"
										src="https://www.yaojiapx.cn/image/images/gozhonghao.jpg" />
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<!-- 			<el-dropdown size="large" >
				<el-menu-item :index="2">赞助</el-menu-item>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item>
							<el-image style="width: 150px; height: 150px" src="https://www.yaojiapx.cn/image/images/weixin.jpg" :fit="scale-down" />
						</el-dropdown-item>
						<el-dropdown-item>
							<el-image style="width: 150px; height: 150px" src="https://www.yaojiapx.cn/image/images/zhifubao.jpg" :fit="scale-down" />
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown> -->

					<el-menu-item index="3">关于</el-menu-item>
					<el-menu-item index="4">退出</el-menu-item>
				</el-menu>
			</el-header>


			<el-container style="height: 90%;">
				<el-aside :width="isCollapse ? '63.2px': '170px'" class="el-aside-style">
					<custom-menu :is-collapse="isCollapse" @add-tab="addTab"></custom-menu>
				</el-aside>
				<el-main>
					<div>
						<el-tabs v-model="editableTabsValue" type="card" closable @tab-click="clickTab" @tab-remove="removeTab">
							<el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title"
								:name="item.name"></el-tab-pane>
						</el-tabs>
					</div>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>

	</div>
</template>

<script>
	import CustomMenu from '@/components/CustomMenu.vue'
	var that, timeSetInterval;
	export default {
		//局部注册组件
		components: {
			CustomMenu,
		},
		data() {
			return {
				key: '',
				isCollapse: false,
				editableTabsValue: '',
				editableTabs: [],
				classNameList: [], //
				classNameId: '',
				organizationList: [],
				organizationId: '',
				notice: '如遇问题，请反馈给客服。关注上课点名公众号，获取使用教程。',
				total: 0, //总数
				leave: 0, //请假
				arrived: 0, //已到
				truant: 0, //旷课
				beLate: 0, //迟到
				nonArrival: 0, //未到
				popupShow: false, //选择机构
				popupRoleShow: false, //角色选择
				organizationList: [], //机构列表
				organizationIndex: 0,
				courseList: [], //今日课程
			};
		},
		watch: {
			classNameId(news) {
				console.log(news);
				that.$store.state.classNameId = news;
			},
			async organizationId(news) {
				console.log(news);
				that.$store.state.organizationId = news;
				//获取班级信息
				const res = await that.$asyncHttpConfig({
					url: "/classname/clearDataCache",
					data: {
						code: that.$store.state.$userInfo.id,
						organizationId: that.$store.state.organizationId,
						organizationType: that.$store.state.organizationType
					}
				})

				//查询班级
				that.getList();


			}
		},
		methods: {
			//获取机构
			async getData() {

				const {
					code,
					total,
					statusList,
					notice,
					privilegesResult,
					userRecord,
					organizationList,
					userChoiceOrganization,
					todayCourse,
					member
				} = await that.$asyncHttp('/classname/selectAmountByStatus', {
					code: that.$store.state.$userInfo.id,
					uid: '',
					organizationId: that.$store.state.organizationId,
					organizationType: that.$store.state.organizationType
				})


				that.total = total;

				that.leave = 0;
				that.arrived = 0;
				that.truant = 0;
				that.beLate = 0;
				that.nonArrival = 0;

				for (var i in statusList) {
					if (statusList[i].status == 1) {
						that.leave = statusList[i].amount;
					} else if (statusList[i].status == 2) {
						that.arrived = statusList[i].amount;
					} else if (statusList[i].status == 3) {
						that.truant = statusList[i].amount;
					} else if (statusList[i].status == 4) {
						that.beLate = statusList[i].amount;
					} else if (statusList[i].status == 5) {
						that.nonArrival = statusList[i].amount;
					}
				}
				that.notice = notice ? notice : that.notice;
				that.$store.state.member = member; //会
				that.$store.state.userRecord = userRecord; //自身功能定制

				that.organizationList = organizationList;
				if (organizationList.length > 0) {
					//如果之前没存储过机构
					if (!userChoiceOrganization) {
						that.$store.state.organizationId = organizationList[0].id;
						that.$store.state.organizationId = organization[0];
						if (organizationList[0].status != -1) {
							that.$store.state.organizationType = '-1';
						} else {
							that.$store.state.organizationType = '';
						}

					} else {
						// 存储过机构
						let organization = userChoiceOrganization.split(":");
						that.$store.state.organizationId = organization[0];
						that.$store.state.organizationType = organization[1];
						that.organizationId = organization[0];

						//机构是否存在
						let index = that.organizationList.findIndex(item => item.id == organization[0]);
						if (index != -1) {
							that.$store.state.organizationIndex = index;
							that.organizationIndex = index;
						}
					}
				}

				that.courseList = todayCourse;

			},
			//获取班级列表
			async getList() {
				let url = "/classname/queryAll1";
				var dataForm = {
					code: that.$store.state.$userInfo.id,
					organizationId: that.$store.state.organizationId,
					organizationType: that.$store.state.organizationType
				}

				//获取班级信息
				const {
					classNameList
				} = await that.$asyncHttp(url, dataForm)
				that.classNameList = classNameList;
				if (classNameList.length > 0) {
					that.classNameId = classNameList[0].id;
				}
			},
			/**
			 * @param {Object} title tab选项卡名称
			 * @param {Object} value tab选项卡name、路由名称
			 */
			addTab(title, value) {
				//是否已经添加过
				let tabs = this.editableTabs.filter(item => item.name == value);
				if (tabs.length == 0) {
					//创建选项卡
					this.editableTabs.push({
						title: title,
						name: value
					});
				}

				this.editableTabsValue = value;
			},
			/**点击tab
			 * @param {Object} value
			 */
			clickTab(value) {
				this.$router.push(value.props.name);
			},
			//删除tab
			removeTab(name) {
				console.log(name);
				let tabs = this.editableTabs;
				tabs.forEach((item, index) => {
					//找到被删除的tab后的js对象
					if (item.name == name) {
						//找到后一个或前一个标签
						// 链判断运算符
						let nextTab = tabs[index + 1] || tabs[index - 1];
						//如果找到
						if (nextTab) {
							//选项卡选中
							this.editableTabsValue = nextTab.name;
							//跳转到选项卡对应界面
							this.$router.push(nextTab.name);
						} else {
							// 没找到
							this.$router.push("/");
						}
					}
				})


				//删除数组中tab标签页js对象
				this.editableTabs = tabs.filter((item) => item.name != name);


			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath)
				if (key == 1) {
					this.$router.push("/homeIndex");
				} else if (key == 4) {
					// this.$store.state.routerViewShow = true;
					that.$store.commit('setRouterViewShow', true);
					that.$store.commit('setuserId', '');
					that.$store.commit('setMember', {});
					that.$store.commit('setUid', '');
					this.createKey();
				} else if (key == 3) {
					window.open("https://www.yaojiapx.cn/webs/main.html?uid=" + this.generateUUID(), "_blank");
				}
			},
			generateUUID() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = Math.random() * 16 | 0,
						v = c === 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(16);
				});
			},
			createKey() {
				clearInterval(timeSetInterval);
				that.$http.post('/user/createKey', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
				}).then((res) => {
					that.key = res.data.key;
					that.createCode();
				})
			},
			createCode() {
				that.$http.post('/user/createBusinessCard/v2', {
					content: that.key
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					responseType: 'blob'
				}).then((res) => {
					console.log(res.data)
					const myBlob = new window.Blob([res.data])
					const qrUrl = window.URL.createObjectURL(myBlob)

					that.$store.state.qrUrl = qrUrl;

					timeSetInterval = setInterval(() => {
						that.queryOpenIdByKey();
					}, 3000);
				})
			},
			queryOpenIdByKey() {

				that.$http.post('/user/queryOpenIdByKey', {
					key: that.key
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
				}).then((res) => {
					if (res.data.code == 'success') {
						clearInterval(timeSetInterval);
						// that.$store.state.routerViewShow = false;
						// that.$store.state.$userInfo.id = res.data.openId;
						// that.$store.state.uid = res.data.uid;
						
						that.$store.commit('setRouterViewShow', false);
						that.$store.commit('setuserId', res.data.openId);
						that.$store.commit('setUid', res.data.uid);
						that.$nextTick(() => {
							that.$router.push("/homeIndex")
						})

					}
				})
			},
		},
		mounted() {
			that = this;
			that.getList();
			that.getData();
		}
	}
</script>

<style>
	.flex-grow {
		flex-grow: 1;
	}

	.div-style {
		padding-top: 10px;
		height: calc(100vh - 160px);
		border-right: 1px solid var(--el-menu-border-color);
	}

	.div-style-class {
		border-bottom: 1px solid var(--el-menu-border-color);
		height: 50px;
		display: flex;
		align-items: flex-end;
		margin-left: 10px;
		padding-bottom: 5px;
		color: #3c3c3cb3;
		font-weight: 600;
		background: white;
	}

	.scrollbar-demo-item {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
		margin: 10px;
		text-align: center;
		border-radius: 4px;
		background: var(--el-color-primary-light-9);
		color: var(--el-color-primary);
	}

	.div-style-content {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow-y: auto;
	}

	.el-aside-style {
		background-color: #545c64;
		height: 100%;
		overflow-y: auto;
	}

	.el-aside-style::-webkit-scrollbar {
		width: 0px;
	}
</style>